<template>
    <div style="height:calc(100vh - 66px)" class="Box">
        <div class="head">
            <div class="search-title">
                <span style>一共{{total}}条订单</span>
                <span>搜索订单</span>
            </div>
            <div class="search">
                <el-input placeholder="请输入内容" v-model="input" size="small">
                    <el-select
                        v-model="select"
                        slot="prepend"
                        placeholder="请选择"
                        class="input-with-select"
                    >
                        <el-option label="全部订单" value="1"></el-option>
                        <el-option label="完成订单" value="2"></el-option>
                        <el-option label="订单ID" value="3"></el-option>
                        <el-option label="用户ID" value="4"></el-option>
                        <el-option label="手机号" value="5"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>

        <div style="flex:1">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="车主:">
                                <span>{{ props.row.borrowId.userName }}</span>
                            </el-form-item>
                            <el-form-item label="手机号:">
                                <span>{{ props.row.borrowId.iphone }}</span>
                            </el-form-item>
                            <el-form-item label="租主:">
                                <span>{{ props.row.returnId.userName }}</span>
                            </el-form-item>
                            <el-form-item label="手机号:">
                                <span>{{ props.row.returnId.iphone }}</span>
                            </el-form-item>
                            <el-form-item label="类型:">
                                <span>{{ props.row.carId.classify }}</span>
                            </el-form-item>

                            <el-form-item label="品牌:">
                                <span>{{ props.row.carId.brand }}</span>
                            </el-form-item>
                            <el-form-item label="型号:">
                                <span>{{ props.row.carId.model }}</span>
                            </el-form-item>
                            <el-form-item label="车牌号:">
                                <span>{{ props.row.carId.license }}</span>
                            </el-form-item>
                            <el-form-item label="租金(元/小时):">
                                <span>{{ props.row.carId.price }}</span>
                            </el-form-item>
                            <el-form-item label="应付租金:">
                                <span>{{ props.row.price }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="订单 ID" prop="_id" width="400"></el-table-column>
                <el-table-column label="创建时间" prop="date" align="center"></el-table-column>
                <el-table-column label="车牌号" prop="carId.license" align="center"></el-table-column>
                <el-table-column label="结算金额" prop="price" align="center"></el-table-column>

                <el-table-column label="订单状态" prop="status" align="center"></el-table-column>
                <el-table-column label="操作" prop="_id" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="updateOrder(scope.$index, scope.row)"
                        >Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current"
        ></el-pagination>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            tableData: [],
            tableI: "",
            total: 0,
            input: "",
            select: ""
        };
    },
    created() {
        this.getOrder();
    },
    methods: {
        getOrder(data = { current: { page: 1, count: 11 } }) {
            axios({
                method: "post",
                url: "order/query",
                data
            }).then(({ data }) => {
                this.tableData = data.result.orderList;
                this.total = data.result.count;
                console.log(data);
            });
        },
        updateOrder(index) {
            this.tableI = this.tableData[index];
            let _id = this.tableI._id;
            axios({
                method: "post",
                url: "order/update",
                data: {
                    query: {
                        _id
                    },
                    data: {
                        status: 0
                    }
                }
            }).then(({ data }) => {
                if (data.code) {
                    this.$notify({
                        title: "成功",
                        message: "成功删除一条订单",
                        type: "success"
                    });
                }
                this.getOrder();
            });
        },
        current(page) {
            console.log(1);
            this.getOrder({ current: { page, count: 11 } });
        }
    }
};
</script>

<style lang="less" scoped >
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.input-with-select {
    width: 120px;
}
.Box {
    display: flex;
    flex-direction: column;
}
.el-pagination {
    margin-bottom: 22px;
}
.head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;

    .search-title {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;
        width: 60%;
    }
    .search {
        width: 40%;
    }
}
</style>
